<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>读取元素的样式</title>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color:aqua;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <br>
    <button id="btn01">点我一下</button>
</body>
</html>
<script>
    // 点击按钮以后读取 box1 的样式
    var box1 = document.getElementById("box1");
    var btn01 = document.getElementById("btn01");
    btn01.onclick=function(){

        // 读取 box1 的宽度
        // alert(box1.style.width); // 仅显示内联样式

        alert(getStyle(box1,"width"));
    };

    /*
        定义一个函数，用来获取指定元素的当前样式
        参数：
                obj 要获取样式的元素
                name 要获取的样式名
    */

    // 同时兼容两种不同浏览器所需要的方法 ⭐⭐📌
    function getStyle(obj,name){

        if(window.getComputedStyle){
            return getComputedStyle(obj,null)[name];
        }else{
            return obj.currentStyle[name];
        }
        // 正常浏览器
        // return getComputedStyle(obj,null)[name];

        // IE8 浏览器
        // return obj.currentStyle[name];
    }

    var obj1={
        name:"孙悟空",
        kg:"80"
    };
    // alert(obj1.name === obj1["name"]);    
    // alert(obj1["kg"]);

</script>